<template>
  <view class="pageLayout" v-if="detail">
    <view class="title_box">
      <view class="top_box">
        <view class="avatar">
          <image :src="buildImgurl + detail.avatarUrl" mode="scaleToFill" />
        </view>
        <view class="userInfo">
          <view class="name">{{ detail.startName }}</view>
          <view class="role">{{
            detail.attendPosition ? detail.attendPosition : "暂无"
          }}</view>
        </view>
      </view>
      <view class="bottom_box">
        <view class="left_box">
          <view class="title">{{ detail.approveTopic }}</view>
          <view class="contain">{{ detail.approveContent }}</view>
          <view class="time">发起时间：{{ detail.startTime }}</view>
          <view class="detail_box">
            <view class="detail_item_box">
              <view class="top">参与人</view>
              <view class="user_name">{{ detail.attendRealName }}</view>
            </view>
            <view class="detail_item_box">
              <view class="top">计划图片</view>
              <view class="link" @click="showQRCode()">点击查看</view>
            </view>
          </view>
        </view>
        <view class="right_box">
          <view class="progress">
            <l-circle
              :current.sync="modelVale"
              :percent="target"
              size="104rpx"
              strokeWidth="10rpx"
              trailWidth="10rpx"
              :strokeColor="detail.remainDay > 0 ? '#3c6fdf' : '#A22C26'"
              trailColor="#f5f5f5"
            >
              <text :class="detail.remainDay > 0?'day_progress':'day_progress day_progress_red'">{{ detail.remainDay }}</text>
            </l-circle>
          </view>
          <view class="day"> 剩余天数 </view>
        </view>
      </view>
    </view>

    <view class="progress_box">
      <!-- v-for="(item, index) in detail.processNodes" -->
      <view
        v-for="(item, index) in list"
        :key="index"
        class="progress_item_box"
        @click="gotoEditInfo(item, index)"
      >
        <template>
          <view class="progress_item">
            <view class="progress_ico">
              <u-icon
                v-if="
                  item.processNodeState == 'Completion' ||
                  item.processNodeState == 'OverdueComletion'
                "
                size="28rpx"
                name="checkmark-circle-fill"
                color="#14A861"
              ></u-icon>
              <view
                v-if="item.processNodeState == 'InProgress'"
                class="circle"
              ></view>
              <view
                v-if="item.processNodeState == 'NotStarted'"
                class="circle circle_not"
              ></view>
            </view>
          </view>
          <view v-if="index != list.length - 1" class="progress_line"></view>
          <view
            :class="[
              'progress_right',
              item.processNodeState == 'InProgress'
                ? 'progress_right_inProgress'
                : item.processNodeState == 'NotStarted'
                ? 'progress_right_not'
                : '',
            ]"
          >
            <view class="progress_header">
              <view class="progress_title">{{
                item.nodeName ? item.nodeName : "请输入计划"
              }}</view>
              <view
                v-if="item.processNodeState != 'NotStarted'"
                class="progress_status"
                :style="
                  'color: ' +
                  processNodeStateColorMap.get(item.processNodeState) +
                  ';'
                "
                >{{ processNodeStateMap.get(item.processNodeState) }}</view
              >
              <view v-else @click.stop="delNode(item)">
                <u-icon
                  size="36rpx"
                  name="more-dot-fill"
                  color="#c8c9cc"
                ></u-icon>
              </view>
            </view>
            <view v-if="item.completionTime" class="progress_text"
              >实际完成时间：{{ item.completionTime }}</view
            >
            <view v-if="item.nodeContent" class="progress_text"
              >进度说明：{{ item.nodeContent }}</view
            >
            <view v-if="item.nodeImagePath" class="progress_text"
              >阶段照片：
              <text @click.stop="showProcessCode(item.nodeImagePath)"
                >点击查看</text
              ></view
            >
          </view>
        </template>
      </view>
      <view
        class="add_progress_item"
        v-if="
          (list[list.length - 1].processNodeState != 'Completion' &&
            list[list.length - 1].processNodeState != 'OverdueComletion' &&
            detail.startID == userInfo.userID) ||
          (detail.startID == userInfo.userID && list.length == 0)
        "
      >
        <view class="addProgree" @click="addProgreess()">
          <u-icon size="28rpx" name="plus-circle" color="#3C6FDF"></u-icon>
          <text class="addProgree_text">添加计划</text>
        </view>
        <!-- <u-button
          class="btn"
          @click="addProgreess()"
          color="#a22d27"
          size="small"
          customStyle="margin-left: 20rpx;padding:8rpx 22rpx;border:1rpx solid #A22C26;color: #ffffff;font-weight:700;border-radius: 12rpx;"
        >
          <u-icon size="28rpx" name="plus" color="#ffffff"></u-icon>
          <text style="margin-left: 8rpx">添加节点</text>
        </u-button> -->
      </view>
    </view>
    <!-- <view class="bot_btn">
      <view class="btn_width" ref="btnBox">
        <u-button
          class="btn"
          :loading="loading"
          @click="save()"
          color="#a22d27"
          customStyle="margin-left: 20rpx;padding:8rpx 22rpx;border:1rpx solid #A22C26;color: #ffffff;font-weight:700;border-radius: 12rpx;"
          >保存</u-button
        >
      </view>
    </view> -->
    <u-modal
      :show="showModel"
      :showConfirmButton="false"
      :showCancelButton="false"
    >
      <view class="slot-content">
        <view class="title">温馨提示</view>
        <view class="content">您确定删除所选的流程吗？</view>
        <view class="btn_box">
          <view class="cancel" @click="showModel = false">取消</view>
          <view class="confirm" @click="deleteContain">确定</view>
        </view>
      </view>
    </u-modal>
    <mytoast ref="toastRef" />
  </view>
</template>

<script>
import store from "../../store/index";
import {
  queryProcessDetailByID,
  saveProcessNode,
  deleteProcessNode,
} from "../api/approval/index.js";
import mytoast from "@/components/mytoast.vue";
export default {
  components: {
    mytoast,
  },
  data() {
    return {
      showModel: false,
      detail: null,
      modelVale: 0,
      target: 0,
      id: "",
      processNodeStateMap: new Map([
        ["NotStarted", "未开始"],
        ["InProgress", "进行中..."],
        ["Completion", "已完成"],
        ["OverdueComletion", "超时完成"],
      ]),
      processNodeStateColorMap: new Map([
        ["NotStarted", "#C8C9CC"],
        ["InProgress", "#A22C26"],
        ["Completion", "#14A861"],
        ["OverdueComletion", "#A22C26"],
      ]),
      list: [
        {
          processNodeState: "NotStarted",
          nodeName: "",
          completionTime: "",
          nodeContent: "",
          nodeImagePath: "",
        },
        {
          processNodeState: "NotStarted",
          nodeName: "",
          completionTime: "",
          nodeContent: "",
          nodeImagePath: "",
        },
        {
          processNodeState: "NotStarted",
          nodeName: "",
          completionTime: "",
          nodeContent: "",
          nodeImagePath: "",
        },
      ],
      delObj: null,
    };
  },
  computed: {
    hasLogin() {
      return this.$store.state.token && this.$store.state.token.length > 0;
    },
  },
  methods: {
    /**
     * 删除确认
     */
    deleteContain() {
      console.log(this.delObj, "this.delObj");

      let data = {
        processNodeID: this.delObj.processNodeID,
      };
      deleteProcessNode(data)
        .then((res) => {
          this.$refs.toastRef.showToast({
            msg: "删除成功",
            duration: 3000,
            position: "center",
          });
          this.getDetail();
          this.showModel = false;
          this.delObj = null;
        })
        .catch((err) => {
          this.$refs.toastRef.showToast({
            msg: err.data.detail,
            duration: 3000,
            position: "center",
          });
        });
    },
    /**
     *
     * @param item 删除的节点
     */
    delNode(item) {
      if (
        this.userInfo.adminType == "ChengZong" ||
        this.userInfo.adminType == "TopAdmin"
      ) {
        return;
      }
      this.showModel = true;
      this.delObj = item;
    },
    /**
     * 保存(后面修改节点页面栈调用)
     */
    save(value) {
      console.log(value, "value");
      this.list[value.index] = {
        ...this.list[value.index],
        ...value.form,
      };
      console.log(this.list, "list");
      this.saveProcess();
    },
    /**
     * 保存计划
     */
    saveProcess() {
      let data = {
        approveID: this.id,
        processNodes: this.list,
      };
      // return
      saveProcessNode(data)
        .then((res) => {
          console.log(res, "res");
          this.$refs.toastRef.showToast({
            msg: "保存成功",
            duration: 3000,
            position: "center",
          });
          this.getDetail();
        })
        .catch((err) => {
          this.$refs.toastRef.showToast({
            msg: err.data.detail,
            duration: 3000,
            position: "center",
          });
        });
    },
    /**
     * 添加节点
     */
    addProgreess() {
      this.list.push({
        processNodeState: "NotStarted",
        nodeName: "",
        status: "",
        completionTime: "",
        nodeContent: "",
        nodeImagePath: "",
      });
      this.saveProcess();
    },
    /**
     * 展示二维码
     */
    showProcessCode(url) {
      let arr = url.split(",").map((item) => {
        return this.imgUrl + "/" + item;
      });
      console.log(arr);

      uni.previewImage({
        urls: arr,
      });
    },
    /**
     * 获取详情
     */
    getDetail() {
      let that = this;
      let data = {
        approveID: this.id,
      };
      (this.list = [
        {
          processNodeState: "NotStarted",
          nodeName: "",
          completionTime: "",
          nodeContent: "",
          nodeImagePath: "",
        },
        {
          processNodeState: "NotStarted",
          nodeName: "",
          completionTime: "",
          nodeContent: "",
          nodeImagePath: "",
        },
        {
          processNodeState: "NotStarted",
          nodeName: "",
          completionTime: "",
          nodeContent: "",
          nodeImagePath: "",
        },
      ]),
        queryProcessDetailByID(data).then((res) => {
          console.log(res, "queryProcessDetailByID");
          this.detail = res.data;
          this.target =
            this.detail.remainDay < 0
              ? 100
              : ((this.detail.sumDay - this.detail.remainDay) /
                  this.detail.sumDay) *
                100;
          res.data.processNodes.map((item, index) => {
            that.list[index] = item;
          });
          console.log(this.list, "this.list");
        });
    },
    /**
     * 填写
     */
    gotoEditInfo(item, index) {
      console.log(item, index);
      if (
        this.userInfo.adminType == "ChengZong" ||
        this.userInfo.adminType == "TopAdmin" ||
        this.detail.approveProcessState == "ProcessEnd" ||
        this.detail.approveProcessState == "OverdueEnd"
      ) {
        return;
      }
      // if (
      //   item.processNodeState == "Completion" ||
      //   item.processNodeState == "OverdueComletion" ||
      //   this.detail.startID != this.userInfo.userID
      // ) {
      //   return;
      // }
      let isLast = index == this.list.length - 1 ? 1 : 0;

      uni.navigateTo({
        url: `/pagesA/approval/pushEdit?id=${
          item.processNodeID ? item.processNodeID : ""
        }&index=${index}&isLast=${isLast}&status=${item.processNodeState}`,
      });
    },
    /**
     * 展示二维码
     */
    showQRCode() {
      if (this.detail.approveImage == "") {
        uni.showToast({
          title: "暂无图片",
          icon: "none",
        });
        return;
      }
      uni.previewImage({
        urls: [this.imgUrl + "/" + this.detail.approveImage],
      });
    },
  },
  onLoad(options) {
    this.id = options.id;
    this.getDetail();
  },
  onShow() {},
  /**
   * 上拉加载更多
   */
  onReachBottom() {},
};
</script>

<style lang="scss" scoped>
.pageLayout {
  padding: 24rpx;
  box-sizing: border-box;
  padding-bottom: 160rpx;
}
.top_box {
  display: flex;
  align-items: center;
  margin-bottom: 40rpx;
  .avatar {
    width: 76rpx;
    height: 76rpx;
    border-radius: 8rpx;
    overflow: hidden;
    margin-right: 20rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .userInfo {
    .name {
      font-size: 30rpx;
      color: #000000;
      font-weight: bold;
      margin-bottom: 8rpx;
    }
    .role {
      color: #c8c9cc;
      font-size: 24rpx;
    }
  }
}
.bottom_box {
  border-bottom: 2rpx solid #f0f0f0;
  padding-bottom: 50rpx;
  padding-bottom: 40rpx;
  display: flex;
  justify-content: space-between;
  .left_box {
    width: 510rpx;
  }
  .right_box {
    .progress {
      width: 104rpx;
      height: 104rpx;
      .day_progress {
        font-family: DIN;
        font-size: 32rpx;
        font-weight: bold;
        color: #3C6FDF;
        &.day_progress_red{
          color: #a22c26;
        }
      }
    }
    .day {
      margin-top: 12rpx;
      font-size: 26rpx;
      color: #000000;
    }
  }
  .title {
    font-size: 36rpx;
    font-weight: bold;
    color: #000000;
    margin-bottom: 20rpx;
  }
  .contain {
    font-size: 28rpx;
    font-weight: 400;
    color: #000000;
    margin-bottom: 8rpx;
    line-height: 48rpx;
  }
  .time {
    color: #c8c9cc;
    font-size: 26rpx;
    margin-bottom: 40rpx;
  }
  .detail_box {
    display: flex;
    .detail_item_box {
      margin-right: 106rpx;
      .top {
        font-size: 24rpx;
        color: #c8c9cc;
        margin-bottom: 16rpx;
      }
      .user_name {
        font-size: 26rpx;
        color: #000000;
        font-weight: bold;
      }
      .link {
        font-size: 26rpx;
        color: #3c6fdf;
        font-weight: bold;
      }
    }
  }
}
.progress_box {
  padding: 60rpx 0;
  .progress_item_box {
    display: flex;
    align-items: center;
    padding-bottom: 40rpx;
    position: relative;
    .progress_line {
      width: 2rpx;
      background-color: #f0f0f0;
      height: calc(100% - 30rpx);
      position: absolute;
      top: 50%;
      left: 15rpx;
      transform: translateX(-50%);
    }
    .progress_item {
      width: 30rpx;
    }
    .progress_right {
      margin-left: 14rpx;
      flex: 1;
      border: 2rpx solid #f0f0f0;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      padding: 48rpx 32rpx;
      .progress_header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .progress_title {
          font-size: 30rpx;
          font-weight: bold;
          color: #000;
          margin-bottom: 20rpx;
        }
        .progress_status {
          font-size: 28rpx;
          font-weight: bold;
        }
      }
      .progress_text {
        font-size: 26rpx;
        color: #969799;
        margin-bottom: 8rpx;
        text {
          color: #3c6fdf;
        }
      }
    }
    .progress_right_inProgress {
      border: 2rpx solid #a22c26;
      .progress_header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .progress_title {
          font-size: 30rpx;
          font-weight: bold;
          margin-bottom: 20rpx;
          color: #a22c26;
        }
      }
    }
    .progress_right_not {
      .progress_header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .progress_title {
          font-size: 30rpx;
          font-weight: bold;
          margin-bottom: 20rpx;
          color: #c8c9cc;
        }
      }
    }
  }
}
.add_progress_item {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  .btn {
  }
}
.circle {
  width: 28rpx;
  height: 28rpx;
  border-radius: 50%;
  border: 2rpx solid #a22c26;
  background-color: #ffffff;
}
.circle_not {
  border: 2rpx solid #f0f0f0;
}
.bot_btn {
  position: relative;
  // background-color: #d52227;
  border-top: 1rpx solid #801c1b26;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  margin-top: 40rpx;
  // box-shadow: #a5a5a5 0px 0px 6px;
  padding: 20rpx;
  padding-bottom: 50rpx;
  background-color: white;
  box-sizing: border-box;
  .btn_width {
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
  }
}
.progress_item_box_item {
  width: 100%;
  position: relative;
}
.addProgree {
  font-size: 26rpx;
  color: #3c6fdf;
  display: flex;
  margin-left: 50rpx;
  text-align: right;
  .addProgree_text {
    margin-left: 16rpx;
  }
}
.slot-content {
  text-align: center;
  width: 100%;
  .title {
    font-size: 30rpx;
    color: #969799;
    margin-bottom: 32rpx;
    width: 100%;
  }
  .content {
    color: #000000;
    font-size: 32rpx;
    font-weight: bold;
    line-height: 56rpx;
    width: 100%;
  }
  .btn_box {
    width: 100%;
    display: flex;
    justify-content: space-around;
    margin-top: 60rpx;
    .cancel {
      width: 260rpx;
      height: 88rpx;
      line-height: 80rpx;
      text-align: center;
      border-radius: 12rpx;
      color: #000;
      background-color: #f5f5f5;
    }
    .confirm {
      width: 260rpx;
      height: 88rpx;
      line-height: 80rpx;
      text-align: center;
      border-radius: 12rpx;
      color: #fff;
      background-color: #a22c26;
    }
  }
}
</style>
